import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_syt/domain/widgets/grid_nav.dart';
import 'package:flutter_syt/domain/widgets/simple_image_loader.dart';
import 'package:flutter_syt/theme/font_styles.dart';
import 'package:flutter_syt/theme/theme_color.dart';
import 'package:flutter_syt/utils/click_utils.dart';
import 'package:yyy_route_annotation/yyy_route_annotation.dart';

class KongKimHorizontal extends StatefulWidget {
  final List<GridNavItemEntity> data;
  final ScrollPhysics physics;

  KongKimHorizontal(this.data, this.physics);

  @override
  State<StatefulWidget> createState() => _KongKimHorizontalState();
}

class _KongKimHorizontalState extends State<KongKimHorizontal> {
  @override
  Widget build(BuildContext context) {
    var space = (MediaQuery.of(context).size.width - 48 - (48 * 4)) / 3;
    return ListView.separated(
      physics: widget.physics,
      scrollDirection: Axis.horizontal,
      itemCount: widget.data.length,
      separatorBuilder: (ctx, index) {
        return Container(
          height: 1,
          width: space,
        );
      },
      itemBuilder: (ctx, index) {
        var e = widget.data[index];
        return GestureDetector(
          onTap:
              ClickUtils.debounce(() => RouteManager.push(context, e.linkUrl)),
          child: Container(
            height: 30,
            width: 48,
            alignment: Alignment.center,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 48,
                  height: 48,
                  child: ImageLoader.loadImage(
                    imageUrl: e.iconImage,
                    width: 48,
                    height: 48,
                  ),
                ),
                SizedBox(height: 5),
                Container(
                  height: 16,
                  width: 48,
                  child: OverflowBox(
                    minHeight: 16,
                    minWidth: 48,
                    maxWidth: 100,
                    maxHeight: 16,
                    child: Container(
                      height: 16,
                      child: Text(
                        e.text,
                        maxLines: 1,
                        textAlign: TextAlign.center,
                        style: FontStyles.headerTextStyle_12
                            .copyWith(color: ThemeColor.colorBlack60),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
